<template>
  <section class="course-list-section">
    <a-form ref="formRef" :rules="formRules" :model="formState" v-bind="formItemLayout"  @finish="onFinish">
      <a-form-item label="班级名称" name="name">
        <a-input v-model:value="formState.name" placeholder="输入班级名称">
        </a-input>
      </a-form-item>
      <a-form-item label="简介" name="desc">
        <a-input v-model:value="formState.desc" :rows="4" placeholder="输入简介"/>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formState.status">
          <template v-for="(item,index) in statusOptions" :key="index">
            <a-radio :value="item.value">{{ item.label }}</a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button style="margin: 0 8px" @click="()=>router.back()">返回</a-button>
      </a-form-item>
    </a-form>
  </section>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import type {Rule} from "ant-design-vue/es/form";
import type {FormInstance} from "ant-design-vue";
import {addClasses, addCurriculum, addUsers, classes, curriculumList, users} from "@/api";
import {useRoute, useRouter} from "vue-router";
const router = useRouter();
const route=useRoute();
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 14},
};
//表单数据
const formState = reactive({
  name: "",
  desc: "",
  status:"1"
})
//表单验证
const formRules: Record<string, Rule[]> = {}
//表单ref
const formRef = ref<FormInstance>()
const genderOptions = [
  {value: '0', label: '男'},
  {value: '1', label: '女'}
]
//账号状态
const statusOptions = [
  {value: '0', label: '禁用'},
  {value: '1', label: '启用'}
]
/**
 * 提交
 * @param values
 */
const onFinish=(values:any)=>{
  console.log('Success:', values);
  const params={
    name: "2023计算机一年级九班",
    desc: "2023年计算机系一年级九班",
    status:1
  }
  addClasses(params).then((res)=>{
    console.log("添加账号",res.data)
    router.back()
  })
}
/**
 * 获取账号详情
 */
const getCurriculum = (id:number|string) => {
  console.log("getCurriculum=====id",id)
  classes({id}).then((res)=>{
    console.log("curriculumList",res.data)
  })
}
onMounted(()=>{
  if (route.query.id){
    const id:string|number=route.query.id as string
    console.log("onMounted=====id",id)
    getCurriculum(id);
  }

})
</script>
<style scoped lang="less">
.course-list-section {
  position: relative;
  padding: 20px;
  background: #fff;
  margin: 10px;
  border-radius: 10px;
}

.teacher-info-top {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 140px;

  .teacher-info-top-bg {
    width: 100%;
    height: 100%;
    filter: blur(60px);
    position: absolute;
    z-index: 50;
  }

  .teacher-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    position: relative;
    z-index: 100;
  }

  .desc {
    margin-left: 20px;

    .name {
      font-size: 18px;
      position: relative;
      box-sizing: border-box;
      color: white;
      z-index: 100;
    }

    .level {
      position: relative;
      z-index: 100;
      font-size: 14px;
      color: white;
    }
  }
}

.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
}
</style>
